<script setup>
import { onMounted, ref, watch } from 'vue'
import { useCityStore } from "@/stores/city";
import {getWeather} from "@/api/Amap/weather";
const cityStore = useCityStore()
const weatherData = ref({})
//console.log(cityStore.NowCity)
onMounted(() => {
    //console.log(cityStore.nowCity)
    getWeather(cityStore.nowCity).then(res => {
        weatherData.value = res.lives[0]
        //console.log(weatherData.value)
    })
    //console.log(weatherData.value.weather)
    
})
// watch(() => cityStore.nowCity, () => {
//     getWeather(cityStore.nowCity).then(res => {
//         weatherData.value = res.lives[0]
//         //console.log(weatherData.value)
//     })
// }, {deep: true})

</script>
 <template> 
    <div class="weather-box">
        <table>
            <tr>
                <td>城市</td>
                <td>{{cityStore.nowCity}}</td>
            </tr>
            <tr>
                <td>天气</td>
                <td>{{ weatherData.weather }}</td>
            </tr>
            <tr>
                <td>温度</td>
                <td>{{ weatherData.temperature }}</td>
            </tr>
            <tr>
                <td>风向</td>
                <td>{{ weatherData.winddirection }}</td>
            </tr>
            <tr>
                <td>风力</td>
                <td>{{ weatherData.windpower }}</td>
            </tr>
        </table>
    </div>
</template>
<style scoped>
.weather-box {
    position: fixed;
    top:15%;
    right: 5%;
    z-index: 9999;
    background: linear-gradient(to top, #6dd5edb0, #2193b0);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 0 3px 2px #333;
}
table, td {
    border-collapse: collapse;
}
table {
    color: #fff;
    text-align: center;
    width: 200px;
    line-height: 30px;
    border-radius: 15px;
    font-size: 15px;
}
td {
    border: 1px solid #eeeeee79;
}
</style>